<template>
	<view class="ma" v-if="isshow">
		<view class="follow" :style="blockStyle">
			<view class="disf">
				<view class="upload_div" :style="leftImageRadius"><vimage v-if="mydata.img" class="bg_img" :src="mydata.img"></vimage></view>
				<text class="txt">{{ mydata.content.left }}</text>
			</view>
			<view class="disf">
				<view class="bian" :style="buttomStyle" @click="followIn">
					<view class="cright" :style="posRightStyle">
						<view :class="mydata.content.right_icon" :style="colorRightIcon"></view>
						<text class="txt">{{ mydata.content.right }}</text>
					</view>
				</view>
				<view class="el-sc-cuo11 iconstyle" :style="buttomColorRightIcon" @click="closeFollow"></view>
			</view>
		</view>
		<u-popup v-model="show" mode="center">
			<view class="popupView"><vimage :src="mydata.linkimg"></vimage></view>
		</u-popup>
	</view>
</template>
<script>
import {mapState, mapMutations} from 'vuex';
import store from '@/store';
export default {
	data() {
		return {
			isshow: true,
			show: false
		};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	created() {
		if (this.mydata.radio == 3) {
			let alltimer = 7 * 24 * 60 * 60 * 100;
			let timer = new Date().getTime();
			if (this.isfollow.time) {
				if (this.isfollow.time + alltimer <= timer) {
					this.isshow = true;
				} else {
					this.isshow = false;
				}
			} else {
				this.isshow = true;
			}
		} else {
			let _this = this;
			this.judgeLogin(
				() => {
					_this.isshow = true;
				},
				() => {
					_this.isshow = !_this.userInfo.subscribe;
				}
			);
			if (this.userInfo.subscribe) {
				this.isshow = false;
			}
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.userInfo,
			isfollow: state => state.isFollow
		}),
		blockStyle() {
			let s = 'margin:' + this.mydata.margin.top * 2 + 'rpx ' + this.mydata.margin.lr + 'rpx ' + this.mydata.margin.bottom * 2 + 'rpx;';
			s += 'border-radius:' + this.mydata.radius.template_radius * 2 + 'rpx;';
			s += 'background:' + this.mydata.color.bg + ';';
			s += 'color:' + this.mydata.color.left + ';';
			s += 'justify-content:' + this.mydata.posAlign + ';';
			return s;
		},
		colorLeftIcon() {
			return 'color:' + this.mydata.color.left_icon + ';';
		},
		posRightStyle() {
			let s = 'right:' + this.mydata.margin.lr / 2 + 'rpx;';
			s += 'color:' + this.mydata.color.right + ';';
			return s;
		},
		colorRightIcon() {
			return 'color:' + this.mydata.color.right_icon + ';';
		},
		buttomColorRightIcon() {
			return 'color:' + this.mydata.color.right_buttom_icon + ';';
		},
		leftImageRadius() {
			return 'border-radius:' + this.mydata.radius.image_radius * 2 + 'rpx;';
		},
		buttomStyle() {
			let s = 'border-radius:' + this.mydata.radius.button_radius * 2 + 'rpx;' + 'background:' + this.mydata.color.right_buttom_bg + ';';
			return s;
		}
	},
	methods: {
		followIn() {
			if (this.mydata.buttomRadio == 2) {
				this.show = true;
			} else {
				this.Jumpurl(this.mydata.linkdata);
			}
		},
		closeFollow() {
			this.isshow = false;
			if (this.mydata.radio == 3) {
				let timer = new Date().getTime();
				this.$store.dispatch('set_follow', {
					time: timer
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.popupView {
	width: 500rpx;
	height: 500rpx;
	background: #ffffff;
}

.bian {
	height: 50rpx;
	display: block;
}

.ma {
	width: 100%;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.follow {
	display: flex;
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0rpx 16rpx;
	justify-content: space-between;

	.txt {
		margin: 0;
		padding: 0 10rpx;
		font-size: 24rpx;
	}

	.cright {
		margin: 0;
		padding: 0 10rpx;
		font-size: 24rpx;
		line-height: 50rpx;
		display: flex;
		text-align: center;
		align-items: center;
		flex-shrink: 0;

		.txt {
			margin-left: 10rpx;
		}
	}
}

.upload_div {
	width: 56rpx;
	height: 56rpx;
	overflow: hidden;
	display: flex;
	flex-shrink: 0;
	.bg_img {
		width: 56rpx;
		height: 56rpx;
	}
	// image {
	// 	width: 100%;
	// 	height: 100%;
	// }
}

.iconstyle {
	margin-left: 10rpx;
}

.disf {
	display: flex;
	align-items: center;
}
</style>
